﻿
@{
    ViewData["Title"] = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<div id="appProject" style="margin:2px;padding:2px;">
    <el-form inline label-position="right" label-width="70px" class="query-form">
        <el-form-item label="环境">
            <el-select v-model="envId" placeholder="请选择">
                <el-option key="0" label="全部" value="0"></el-option>
                <el-option v-for="item in envData"
                           :key="item.id"
                           :label="item.envName"
                           :value="item.id">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="项目">
            <el-select v-model="projectId" placeholder="请选择">
                <el-option key="0" label="全部" value="0"></el-option>
                <el-option v-for="item in projectData"
                           :key="item.id"
                           :label="item.projectName"
                           :value="item.id">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="版本号">
            <el-input v-model="versionNumber"></el-input>
        </el-form-item>
        <el-form-item label="关键字">
            <el-input v-model="keyword"></el-input>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" size="small" @@click="handleSearch">查询</el-button>
        </el-form-item>
    </el-form>
    <el-table :data="tableData" stripe border style="width:100%" size="mini">
        <el-table-column type="index" width="50" align="center"></el-table-column>
        <el-table-column prop="projectCode" label="项目编码" width="100"></el-table-column>
        <el-table-column prop="projectName" label="项目名称" width="180"></el-table-column>
        <el-table-column prop="envCode" label="环境" width="80" align="center"></el-table-column>
        <el-table-column prop="envName" label="环境" width="100" align="center"></el-table-column>
        <el-table-column prop="versionNumber" label="版本号" width="120" align="center"> </el-table-column>
        <el-table-column prop="remark" label="备注" width="300"></el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="200" align="center">
        </el-table-column>
        <el-table-column prop="updateTime" label="修改时间" width="200" align="center">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="250" align="center">
            <template slot-scope="scope">
                @*<el-button type="primary" size="mini" @@click="ProjectEdit(scope.row,scope.row.id)">还原</el-button>*@

                <el-button size="mini" @@click="historyShow(scope.row)" v-show="pageButtons.includes('viewhistory')">查看</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination @@size-change="handleSizeChange"
                   @@current-change="handleCurrentChange"
                   :current-page="currentPage"
                   :page-sizes="[10, 20, 50, 100]"
                   :page-size="10"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="total">
    </el-pagination>

    @*<el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>*@

    <el-dialog :title="dialogTitle"
               :visible.sync="dialogVisible"
               width="80%"
               height="500px" size="mini">
        <textarea disabled style="width: 100%;height: 500px;">{{historyData.jsonSettings}}</textarea>
        <span slot="footer" class="dialog-footer">
            <el-button @@click="dialogVisible = false" size="mini">关闭</el-button>
        </span>
    </el-dialog>
</div>

<style>

    .el-dialog__body {
        padding-left: 0px !important;
        padding-top: 0px !important;
        padding-bottom: 0px !important;
    }
</style>

<script>


    var vueProject = new Vue({
        el: '#appProject',
        data() {
            return {
                pageButtons: [],
                dialogVisible: false,
                dialogTitle:"",
                envId: getQueryString("envId")||'0',
                projectId: getQueryString("projectId")||'0',
                versionNumber:'',
                keyword:'',
                pageSize: 10,
                currentPage: 1,
                total: 0,
                tableData: [],
                envData: [],
                projectData: [],
                historyData: {}
            }
        },
        created(){
            var _this = this;
            this.GetProjectHistoryList();
            this.GetEnvironmentList();
            this.GetProjectList();

            _this.$getMenuButtons();
        },
        methods: {
            historyShow(row) {
                this.dialogTitle = "【" + row.projectName + "】【" + row.envName +"】【版本号："+row.versionNumber+"】配置"; 
                this.GetProjectHistoryById(row.id);
                this.dialogVisible = true;
            },
            tableRowClassName({ row, rowIndex }) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },

             GetProjectHistoryList() {
                  var _this = this;
                 _this.$post("@Url.Action("GetProjectHistoryPageList", "Project")", {
                     PageIndex: _this.currentPage,
                     PageSize: _this.pageSize,
                     projectId: parseInt( _this.projectId),
                     envId: parseInt(_this.envId ),
                     keyword: _this.keyword,
                     VersionNumber: _this.versionNumber
                 }).then((response) => {
                     _this.tableData = response.items;
                        _this.total = response.totalCount;
                  }).catch((error) => {
                  });
            },
                GetEnvironmentList() {
                  var _this = this;
                 _this.$get("@Url.Action("GetEnvironmentSimpleList", "Environment")" ).then((response) => {
                     _this.envData = response;
                  }).catch((error) => {
                  });
            },
               GetProjectList() {
                  var _this = this;
                 _this.$get("@Url.Action("GetProjectSimpleList", "Project")" ).then((response) => {
                     _this.projectData = response;
                  }).catch((error) => {
                  });
            },
            GetProjectHistoryById(HistoryId) {
                  var _this = this;
                      _this.$get("@Url.Action("GetProjectHistoryById", "Project")?HistoryId=" + HistoryId ).then((response) => {
                          _this.historyData = response;
                  }).catch((error) => {
                  });
            },
            handleSizeChange(val) {
                this.pageSize = val;
                this.GetProjectHistoryList();
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                this.GetProjectHistoryList();
            },
            handleSearch() {
                this.GetProjectHistoryList();
            }
        }
    });
</script>
